// ? 获取本地存储的数据
let userId = localStorage.getItem("id");

let token = localStorage.getItem("token");

// ? 创建空数组
let productArr = [];

// ? add按钮
let addBtn = document.querySelector(".addBtn");

// ? 添加商品框
let addBox = document.querySelector(".addCommodity-box");

// ? 修改商品框
let editBox = document.querySelector(".editCommodity-box");

let flag = true;
addBtn.onclick = function () {
  if (flag) {
    // *点击出现
    addBox.style.display = "block";
    flag = false;
  } else {
    // * 点击隐藏
    addBox.style.display = "none";
    flag = true;
  }
};

// todo 添加
let ipts = document.querySelectorAll(".addCommodity-box input");

ipts[4].onclick = function () {
  let pname = ipts[0].value;
  let pprice = ipts[1].value;
  let pimg = ipts[2].value;
  let pdesc = ipts[3].value;
  /* 
    添加商品 接口

    接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
        1.

    pimg 2.
    pname 3.
    pprice 4.
    pdesc 5.
    uid （可选）用户商品

         使用方式  post 请求，参数在请求体
    */
  let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
  axios
    .get(url, {
      params: {
        pname,
        pprice,
        pimg,
        pdesc,
        uid: userId,
      },
    })
    .then((r) => {
      console.log(r.data);
      alert(r.data.msg);
      loadList();
    });
};

// ? 展示商品列表
loadList();
function loadList() {
  let pagenum = 0;
  let pagesize = 20;
  let uid = userId;
  /* 
    商品列表接口


    所有商品接口
    get
    参数
    pagesize  每页获取几个数据
    pagenum 获取第几页数据
    uid  用户id
    http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4
    */
  let url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
  axios.get(url, { params: { pagenum, pagesize, uid } }).then((r) => {
    console.log(r.data.msg);
    productArr = r.data.data;
    let liArr = productArr.map(
      (v) => `
            <li>
              <a href="details.html?id=${v.pid}" style="text-decoration:none">
                <img src="${v.pimg}" alt="图片加载失败"></br>
                <span>${v.pname}</span></br>
                <span>¥ ${v.pprice}</span></br>
                <span>${v.pdesc}</span></br>
              </a>
                <button onclick="delBtn(${v.pid},this)">删除</button>
                <button onclick="editBtn(${v.pid})">修改</button>
            </li>
        `
    );
    document.querySelector(".main__primary-commodity2").innerHTML = liArr;
  });
}

// ? 删除
function delBtn(pid, btn) {
  // console.log(pid);
  // console.log(btn);
  /* 
    删除商品 接口

    接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
         接口请求方式：get
         接口参数：

                pid（必选）商品的id
                uid（必选）用户的id
                 token（必选）登陆时候返回的token

                  使用方式
                 http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

         服务器返回json数据
    */
  let uid = userId;
  console.log(uid);
  console.log(token);
  let url = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
  axios
    .get(url, {
      params: {
        pid,
        uid,
        token,
      },
    })
    .then((r) => {
      console.log(r.data);
      alert(r.data.msg);
      btn.parentNode.remove();
    });
}

// ? 修改
function editBtn(pid) {
  console.log(pid);
  /* 
    修改商品 接口

    接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
         接口请求方式：get
         接口参数：

    pid（必选）商品的id
    pname（必选）商品
    pprice（必选）商品
    pdesc（必选）商品
    使用方式

    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

         服务器返回json数据
    */
  if (flag) {
    editBox.style.display = "block";
    flag = false;
  } else {
    editBox.style.display = "none";
    flag = true;
  }

  // ? 根据pid获取对应商品
  let obj = productArr.find((v) => v.pid == pid);
  console.log(obj);
  let updateIpts = document.querySelectorAll(".editCommodity-box input");
  updateIpts[0].value = obj.pname;
  updateIpts[1].value = obj.pimg;
  updateIpts[2].value = obj.pprice;
  updateIpts[3].value = obj.pdesc;
  // 为保存按钮绑定单击响应函数
  updateIpts[4].onclick = () => {
    console.log(4);
    // 需求重新获取输入框的值
    let pname = updateIpts[0].value;
    let pimg = updateIpts[1].value;
    let pprice = updateIpts[2].value;
    let pdesc = updateIpts[3].value;
    let updateAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
    axios.get(updateAPI,{params:{pname,pimg,pprice,pdesc,pid}}).then(r=>{
        console.log(r.data);
        alert(r.data.msg);
        editBox.style.display = "none";
        loadList();
    })
};
}